<template>
  <q-card flat class="bg-grey-1 card-radius">
    <q-card-section>
      <div class="row">
        <div class="q-pr-md text-h5 text-light-blue-10 cap">
          #{{ item.id }} Section: {{ item.log_type }}
        </div>
        <div
          v-if="item.category_type"
          class="q-pr-md text-h5 text-light-blue-10 cap"
        >
          Sub-section: {{ item.category_type }}
        </div>

        <div
          v-if="item.action_type"
          class="q-pr-md text-h5 text-light-blue-10 cap"
        >
          Action: {{ item.action_type }}
        </div>

        <div
          v-if="item.order_no"
          class="q-pr-md text-h5 text-light-blue-10 cap"
        >
          Job Order: {{ item.order_no }}
        </div>
      </div>
      <div>
        <span class="text-grey-7 text-body2"> updated by </span>
        {{ item.username }}
        <span class="text-grey-7 text-body2"> on </span>
        <span class="text-grey-9 text-body">
          {{ formatDateTimeString(item.timestamp) }}
        </span>
      </div>
      <ul>
        <div>
          <span class="item" v-if="item.parent_stock_code || item.parent_part">
            Parent Item:
          </span>
          <span v-if="item.parent_stock_code">
            Stock Code: {{ item.parent_stock_code }}
          </span>
          <span v-if="item.parent_part">
            Serial No: {{ item.parent_part }}
          </span>
        </div>

        <div>
          <span class="item" v-if="item.stock_code || item.part"> Item: </span>
          <span v-if="item.stock_code">
            Stock Code: {{ item.stock_code }}
          </span>
          <span v-if="item.part"> Serial No: {{ item.part }} </span>
        </div>
        <!-- <li class="item">Function</li>
              {{
                item.action
              }} -->
        <li class="item">Description</li>
        {{
          item.description
        }}
      </ul>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { EventLogInterface } from 'src/services/type';
import { formatDate, formatDateTimeString } from 'src/utils/dateUtils';
import { ref } from 'vue';


const props = defineProps<{
    item: EventLogInterface
}>()

const item = ref(props.item)

</script>
